<template>
  <s-layout>
    <!--    <su-swiper class="ss-m-b-14" :list="detail.images" dotStyle="tag" imageMode="widthFix"-->
    <!--               dotCur="bg-mask-40" :seizeHeight="750" />-->
    <uni-swiper-dot mode="default">
      <swiper class="swiper-box">
        <swiper-item v-for="(item, index) in detail.images" :key="index">
          <image :src="sheep.$url.static(item)" class="log-card-img"></image>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
    <view class="vehicleDetails">
      <view class="priceInformation">
        <view class="ss-flex ss-col-bottom">
          <view class="text-price text-1">{{ price }}</view>
          <view class="text-price text-2">{{ original_price }}</view>
        </view>
        <view class="title">{{ detail.title }} {{ detail.subtitle }}</view>
        <view v-if="detail.sku_prices.length>1" class="colorSelection ss-flex ss-flex-wrap">
          <view class="colorNumber">{{ detail.sku_prices.length }}色可选</view>
          <view class="ss-flex ss-flex-wrap">
            <view v-for="(item,index) in detail.sku_prices" :class="{'active':active===index}"
                  class="item"
                  @tap="handleColor(index)">
              <!--              <image class="icon-car" v-if="index===1" src="@/static/img/car-purple.png"></image>-->
              <!--              <image class="icon-car" v-else src="@/static/img/car-green.png"></image>-->
              <view>{{ item.goods_sku_text && item.goods_sku_text[0] ? item.goods_sku_text[0] : '' }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="product-content">
        <view class="tab">
          <view>商品详情</view>
        </view>
        <view class="productDetails" v-html="detail.content">

        </view>
      </view>
    </view>
    <su-fixed :isInset="false" :val="0" bottom>
      <view class="vehicleDetails-footer ss-flex ss-col-center ss-row-between">
        <button @tap="onConfirm">立即订购</button>
      </view>
    </su-fixed>
  </s-layout>
</template>

<script setup>
  import { computed, reactive, ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
  const userInfo = computed(() => sheep.$store('user').userInfo);

  // 创建订单&跳转
  async function submitOrder() {
    const {
      code,
      data,
    } = await sheep.$api.order.create(state.orderPayload);
    if (code === 1) {
      if (data.status === 'paid') {
        sheep.$router.redirect('/pages/pay/result', {
          orderSN: data.order_sn,
        });
      } else {
        sheep.$router.redirect('/pages/pay/index', {
          orderSN: data.order_sn,
        });
      }
    }
  }

  //创建订单
  async function getOrderInfo() {
    let {
      code,
      data,
    } = await sheep.$api.order.calc(state.orderPayload);
    if (code === 1) {
      state.totalNumber = 0;
      state.orderInfo = data;
      state.orderInfo.goods_list.forEach((item) => {
        state.totalNumber += item.goods_num;
      });
    }
  }

  const imgList = computed(() =>
    detail.images.map((item) => ({
      ...item,
      src: sheep.$url.cdn(item.src),
      poster: sheep.$url.cdn(item.poster),
    })),
  );
  const state = reactive({
    orderPayload: {
      goods_list: [],
    },
    orderInfo: {},
    addressInfo: {},
    invoiceInfo: {},
    totalNumber: 0,
    showCoupon: false,
    couponInfo: [],
    showDiscount: false,
  });
  const active = ref(0);
  const original_price = ref(0);
  const price = ref(0);
  // 获取商品详情
  const detail = ref({});
  const getData = async (options) => {
    const { code, data } = await sheep.$api.goods.goodsDetail({ ...options });
    if (code === 1) {
      detail.value = data;
      detail.value.content = RichTextnew(detail.value.content);
      let arr = [
        { goods_id: data.id, goods_num: 1, goods_sku_price_id: data.sku_prices[0].id },
      ];
      original_price.value = data.sku_prices[0].original_price;
      price.value = data.sku_prices[0].price;
      state.orderPayload.goods_list = arr;
    }
  };
  //选择颜色
  const handleColor = (index) => {
    let data = detail.value.sku_prices[index];
    active.value = index;
    let arr = [
      { goods_id: detail.value.id, goods_num: 1, goods_sku_price_id: data[0].id },
    ];
    original_price.value = data.original_price;
    price.value = data.price;
    state.orderPayload.goods_list = arr;
  };

  const RichTextnew = (html) => {
    let newheml = html.replace(/<img[^>]*>/gi, function(match, capture) {
      match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
      match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
      match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
      return match;
    });
    newheml = newheml.replace(/style="[^"]+"/gi, function(match, capture) {
      match = match.replace(/width:[^;]+;/gi, 'width:100%;').replace(/width:[^;]+;/gi, 'width:100%;');
      return match;
    });
    newheml = newheml.replace(/<br[^>]*\/>/gi, '');
    newheml = newheml.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
    return newheml;
  };

  async function onConfirm() {
    // sheep.$router.redirect('/pages/pay/index', {
    //   orderSN: '202412233346778746009000',
    // });
    // getOrderInfo();
    if(userInfo.value.is_verify_identity != 1){
      uni.showToast({
        title: '需要购买身份才能购买',
        icon: 'none',
      })
      return
    }
    submitOrder();
  }

  // @tap="sheep.$router.go('/pages/inherit/payment')"
  onLoad((options) => {
    getData(options);
  });
</script>

<style lang="scss" scoped>
  .swiper-box {
    height: 420rpx;
  }

  .log-card-img {
    width: 100%;
    height: 100%;
  }

  .vehicleDetails {
    padding: 15px 15px 110px;
    box-sizing: border-box;
    background-color: #090909;


    .priceInformation {
      padding: 20px;
      box-sizing: border-box;
      background: #1C1C1E;
      border-radius: 10px;
      margin-bottom: 10px;

      .text-1 {
        font-weight: 500;
        font-size: 26px;
        color: #00A1FF;
        margin-right: 10px;
      }

      .text-2 {
        font-weight: 400;
        font-size: 16px;
        color: #767676;
        line-height: 26px;
        text-decoration-line: line-through;
      }

      .title {
        font-weight: 400;
        font-size: 17px;
        color: #FFFFFF;
        margin: 30px 0 26px;
      }

      .colorSelection {
        .colorNumber {
          font-weight: 400;
          font-size: 15px;
          color: #E4E4E4;
          margin-right: 15px;
          margin-bottom: 10px;
        }

        .item {
          width: 83px;
          height: 26px;
          line-height: 26px;
          background: #2A2A2D;
          border-radius: 13px;
          font-weight: 400;
          font-size: 13px;
          color: #E4E4E4;
          padding: 3px 18px 3px 3px;
          box-sizing: border-box;
          margin-right: 10px;
          margin-bottom: 10px;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;

          &.active {
            color: #13C093;
            background: transparent;
            border: 1px solid #13C093;
          }
        }

        .icon-car {
          width: 21px;
          height: 21px;
        }
      }
    }

    .product-content {
      background: #1C1C1E;
      border-radius: 10px;
      padding: 24px 15px;
      box-sizing: border-box;

      .tab {
        padding: 0 4px;
        box-sizing: border-box;
        font-weight: 400;
        font-size: 18px;
        color: #FFFFFF;
        margin-bottom: 25px;

      }

      .productDetails {
        color: #fff;

        :deep() {
          img {
            width: 100%;
          }
        }

        image {
          width: 100%;
        }
      }
    }
  }

  .commodity {
    width: 100%;
    height: 375px;
  }

  .vehicleDetails-footer {
    padding: 20px 15px;
    box-sizing: border-box;
    background: #151515;

    button {
      width: 100%;
      height: 38px;
      line-height: 38px;
      text-align: center;
      border-radius: 19px;
      font-weight: 500;
      font-size: 16px;
      color: #090909;
      background: linear-gradient(90deg, #45C9F0, #36F6AF);
    }
  }


</style>
